import { createElement, useEffect, useState } from 'rax';
import View from 'rax-view';
import Text from 'rax-text';
import Image from 'rax-image';
import ScrollView from 'rax-scrollview';
import './index.css';

const ModalMakeing = (props) => {
  let {
    showMakeing,
    myPortrayList,
    portrayId
  } = props;
  
  const onChoosePortrayId = (id, img, name) => {
    props.onChooseItem && props.onChooseItem({id: id, img: img, name});
  }

  const doAdd = (e) => {
    e.stopPropagation();
    props.onAdd && props.onAdd({event: e});
  }

  return (
    <View
      className='maskView'
      catchTouchMove
      onClick={()=>{
        props.onClose && props.onClose()
      }}
    >
      <View
        onClick={(e)=>{
          e.stopPropagation();
        }}
        className='modal_makeing'
      >
        <View className='modal_makeing_title'>
          选择我的脸部档案
          <Image
            source={{
              uri: 'https://jala-test-images.sndaurl.cn/images/closeIcon.png'
            }}
            className='modal_makeing_title_icon'
            onClick={()=>{props.onClose && props.onClose()}}
            mode='aspectFill'
          />
        </View>
        {
          myPortrayList.length > 0 ? (
            <ScrollView
              style={{
                height: '880rpx'
              }}
              className='modal_makeing_list'
            >
              {
                myPortrayList.map(item=>
                  <View
                    className='modal_makeing_list_item'
                    onClick={()=>{onChoosePortrayId(item.id, item.archives_img, item.archives_name)}}
                    key={item.id}
                  >
                    <View className='modal_makeing_list_item_img'>
                      <Image
                        source={{
                          uri: item.archives_img
                        }}
                        className='modal_makeing_list_item_img_path'
                        mode='aspectFill'
                      />
                    </View>
                    <View className='modal_makeing_list_item_info'>
                      <View className='modal_makeing_list_item_info_name'>{item.archives_name}</View>
                      <View className='modal_makeing_list_item_info_time'>上传时间：{item.create_time}</View>
                    </View>
                    {/* <Image
                      source={{
                        uri: item.id == portrayId ? 'https://jala-test-images.sndaurl.cn/images/checkmark.png' : 'https://jala-test-images.sndaurl.cn/images/unchecked.png'
                      }}
                      mode='aspectFill'
                      className='modal_makeing_list_item_icon'
                    /> */}
                  </View>
                )
              }
            </ScrollView>
          ) : (
            <View className='modal_makeing_empty'>
              <Image
                source={{
                  uri: 'https://jala-test-images.sndaurl.cn/images/empty.png'
                }}
                className='modal_makeing_empty_img'
                mode='aspectFill'
              />
              <View className='modal_makeing_empty_text'>什么都没有，快去添加吧</View>
            </View>
          )
        }
        <View className='modal_makeing_action' catchTouchMove onClick={(e)=>{doAdd(e)}}>添加脸部档案</View>
      </View>
    </View>
  )
}

export default ModalMakeing;
